<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
	<meta charset="utf-8" />
	<title>CIM Webclient for protobuf</title>
	<link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon">
	<link charset="utf-8" rel="stylesheet" href="./css/bootstrap.min.css" />
	<link charset="utf-8" rel="stylesheet" href="./css/common.css" />
	<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
	<script type="text/javascript" src="./js/common.js"></script>
	<script type="text/javascript" src="./js/cim/message.js"></script>
	<script type="text/javascript" src="./js/cim/replybody.js"></script>
	<script type="text/javascript" src="./js/cim/sentbody.js"></script>
	<script type="text/javascript" src="./js/cim/cim.web.sdk.js"></script>
</head>


<script>

	/***********************************推送配置开始**************************/

	/**  当socket连接成功回调 **/
	function onConnectFinished() {
		CIMPushManager.bind($('#account').val());
	}

	/** 当收到请求回复时候回调  **/
	function onReplyReceived(reply) {
		console.log(reply);
		if (reply.key === KEY_CLIENT_BIND && reply.code === CODE_OK) {
			hideProcess();

			$('#LoginDialog').fadeOut();

			$('#MessageDialog').fadeIn();
			$('#MessageDialog').addClass("in");
			$("#current_account").text($('#account').val());
		}

		/**
		 * 链接鉴权失败
		 */
		if (reply.key === KEY_HANDSHAKE && reply.code === CODE_UNAUTHORIZED) {
			hideProcess();
			showETip("鉴权失败");
		}
	}

	/** 当收到消息时候回调  **/

	function onMessageReceived(message) {
		console.log(message);
		if (message.action === ACTION_999) {
			$('#MessageDialog').fadeOut();
			$('#LoginDialog').fadeIn();
			$('#LoginDialog').addClass("in");
			return;
		}

		showNotification(message.content);
		var time = new Date(message.timestamp).toLocaleString();
		$("#messageList").prepend("<div class='alert alert-info' >" + time + "</p></p>" + message.content + "</div>");
	}


	/***********************************推送配置结束**************************/



	/***********************************业务配置开始**************************/

	function doLogin() {

		if ($.trim($('#account').val()) == '') {
			return;
		}
		showProcess('正在接入请稍后......');
		/**登录成功后创建连接****/
		CIMPushManager.connect();
	}



	$(document).ready(function () {
		$('#LoginDialog').fadeIn();
		$('#LoginDialog').addClass("in");
		$('#host').val(CIM_HOST);
		$('#port').val(CIM_PORT);
		initNotification();
	});


	function initNotification() {
		//判断浏览器是否支持桌面通知
		if (window.Notification) {
			var notification = window.Notification;
			if (notification.permission == "default") {
				notification.requestPermission(function (permission) {
				});
			}
		}
	}

	function showNotification(msg) {
		var notify = new Notification("系统消息", {
			body: msg,
			icon: '/image/icon.png',
			tag: 1
		});

		notify.onshow = function () {
			setTimeout(function () {
				notify.close();
			}, 3000);
		}
	}

	/***********************************业务配置结束**************************/
</script>


<body style="width: 600px;">
	<div class="modal fade" id="LoginDialog" tabindex="-1" role="dialog" data-backdrop="static">
		<div class="modal-dialog" style="width: 400px;margin: 64px auto;">
			<div class="modal-content">
				<div class="modal-body" style="padding:0px;">
					<div
						style="height:200px;text-align: center; background: #5FA0D3; color: #ffffff; border: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px;">
						<img src="./image/icon.png" style="height: 72px;width: 72px;margin-top:40px;" />
						<div style="margin-top: 20px; color: #ffffff;font-size: 16px;">请输入一个帐号用于登录，随后接收推送消息</div>
					</div>

					<div class="input-group"
						style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
						<span class="input-group-addon">账号</span>
						<input type="text" class="form-control" id="account" maxlength="32" placeholder="帐号（数字或者英文字母）"
							style="display: inline; width: 100%; height: 50px;" />
					</div>

					<div class="alert alert-success" role="alert" style="margin: 0 10px;">
						cim.web.sdk.js中设置cim服务的IP(域名)和端口
					</div>

					<div class="input-group"
						style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
						<span class="input-group-addon">host</span>
						<input type="text" class="form-control" id="host" maxlength="32" readonly="readonly"
							style="display: inline; width: 100%; height: 50px;" />
					</div>

					<div class="input-group"
						style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
						<span class="input-group-addon">port</span>
						<input type="text" class="form-control" id="port" maxlength="32" readonly="readonly"
							style="display: inline; width: 100%; height: 50px;" />
					</div>
				</div>
				<div class="modal-footer" style="text-align: center;">
					<a type="button" class="btn btn-success btn-lg" onclick="doLogin()" style="width: 300px;">登录</a>
				</div>
			</div>
		</div>
	</div>

	<!-- 消息提示页面 -->
	<div class="modal fade" data-backdrop="static" id="MessageDialog" tabindex="-1" role="dialog">
		<div class="alert alert-success" role="alert">
			通过<a href="http://127.0.0.1:8080/console/session/list" class="alert-link" target="_blank">控制台</a>或者<a
				href="http://127.0.0.1:8080/swagger-ui/index.html" target="_blank" class="alert-link">调用接口</a>发送消息
		</div>
		<div class="modal-dialog" style="width: 720px;margin: 30px auto;">
			<div class="modal-content">
				<div class="modal-header" style="text-align: center;">
					<span style="float: left;">消息显示面板</span>
					<span style="float: right;color: #4caf50;">当前帐号：<span id="current_account"></span></span>
				</div>
				<div class="modal-body" id="messageList" style="min-height: 600px;">
				</div>
			</div>
		</div>
	</div>
</body>

</html>